<template>
  <div class="hello-ezuikit-js">
    <div class="changeBtn">
      <span v-if="!type" @click="changetype(1)">切为直播</span>
      <span v-if="type" @click="changetype(0)">切为回放</span>
    </div>
    <div id="video-container"></div>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";

export default {
  // 组件名称
  name: 'Video',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      player: null,
      type: 1,
      accessToken: ''
    }
  },
  // 组件初始化
  created () {

  },
  // 组件实例挂载完毕
  mounted () {
    this.getAssToken().then((val) => {

      // 方法2

      this.offSecret().then((val) => {

        // 方法3

        this.showType()

      });

    });
    // this.getAssToken()
    // this.offSecret()
    // this.showType()
    // console.log('mounted', this.accessToken)



  },
  // 组件方法
  methods: {
    changetype (type) {
      this.type = type
      this.showType()
    },


    async getAssToken () {
      var res = await this.$axios({
        method: 'post',
        url: 'https://open.ys7.com/api/lapp/token/get',
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        params: {
          appKey: '121cc831f01b4fec83ca58063b399481',
          appSecret: '1ae8720c95d7f7b42c3cebfae98c1e42',
        }
      })
      this.accessToken = res.data.data.accessToken


    },
    async offSecret () {
      var res = await this.$axios({
        method: 'post',
        url: 'https://open.ys7.com/api/lapp/device/encrypt/off',
        // header: {
        //   'Content-Type': 'application/x-www-form-urlencoded'
        // },
        params: {
          accessToken: this.accessToken,
          deviceSerial: 'K11372949',
          validateCode: 'JLTFTF',
        }
      })
    },
    showType () {

      // 回放
      if (this.type == 0) {
        this.player = new EZUIKit.EZUIKitPlayer({
          id: 'video-container', // 视频容器ID
          accessToken: this.accessToken,
          url: 'ezopen://open.ys7.com/K11372949/1.rec',
          template: 'bca828baa0ac49b8afe8fee928ddfce7',
          plugin: ['talk'], // 加载插件，talk-对讲
          width: 380,
          height: 200,
        });
      } else if (this.type == 1) {
        this.player = new EZUIKit.EZUIKitPlayer({
          id: 'video-container', // 视频容器ID
          accessToken: this.accessToken,
          url: 'ezopen://open.ys7.com/K11372949/1.live',
          template: '81e7153711e7415ea3603e6fc759030b',
          plugin: ['talk'], // 加载插件，talk-对讲
          width: 380,
          height: 200,
        });

      }
    }
  }
}
</script>

<style scoped lang='less'>
.hello-ezuikit-js {
  width: 2.03125rem /* 390/192 */;
  box-sizing: border-box;
  .changeBtn {
    line-height: 0.15625rem /* 30/192 */;
    width: 0.416667rem /* 80/192 */;
    border: 0.005208rem /* 1/192 */ solid #1eb0fc;
    text-align: center;
    margin: 0.026042rem /* 5/192 */ auto;
    font-size: 0.072917rem /* 14/192 */;
    color: #ffffff;
    background: #3596bd;
    border: 0.010417rem /* 2/192 */ solid #8ce5f4;
    box-shadow: 0 0 0.026042rem /* 5/192 */ 0.005208rem /* 1/192 */
      rgba(214, 221, 224, 0.83);
    box-sizing: border-box;
    &:hover {
      cursor: pointer;
    }
  }
  .video-container {
    .text {
      color: red;
      z-index: 8;
    }
  }
}
</style>
